<!--
 * @Date: 2019-11-11 10:48:37
 * @LastEditors  : Vi卡农
 * @LastEditTime : 2019-12-26 10:12:35
 * @describe: --
 -->
<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-sys__dept">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item>
                    <el-button
                        v-if="$hasPermission('sys:dept:save')"
                        type="primary"
                        @click="addOrUpdateHandle()"
                    >{{ $t('add') }}</el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="dataListLoading"
                :data="dataList"
                row-key="id"
                border
                style="width: 100%;"
            >
                <el-table-column
                    prop="name"
                    :label="$t('dept.name')"
                    header-align="center"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    prop="parentName"
                    :label="$t('dept.parentName')"
                    header-align="center"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="sort"
                    :label="$t('dept.sort')"
                    header-align="center"
                    align="center"
                    width="80"
                ></el-table-column>
                <el-table-column
                    :label="$t('handle')"
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="150"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="$hasPermission('sys:dept:update')"
                            type="text"
                            size="small"
                            @click="addOrUpdateHandle(scope.row.id)"
                        >{{ $t('update') }}</el-button>
                        <el-button
                            v-if="$hasPermission('sys:dept:delete')"
                            type="text"
                            size="small"
                            @click="deleteHandle(scope.row.id)"
                        >{{ $t('delete') }}</el-button>
                        <el-button
                            v-if="$hasPermission('sys:deptbusiness:list')"
                            type="text"
                            size="small"
                            @click="DbusinessFun(scope.row)"
                        >店商圈</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update
                v-if="addOrUpdateVisible"
                ref="addOrUpdate"
                @refreshDataList="getDataList"
            ></add-or-update>
        </div>

        <el-dialog :visible.sync="Dvisible" title="店商圈">
            <el-form :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
                <el-form-item label="部门" prop="name">
                    <span>{{DSQdataForm.name}}</span>
                </el-form-item>
                <el-form-item label="状态">
                     <el-switch
                            class="switchStyle"
                            v-model="DSQdataForm.businessState"
                            :active-value="1"
                            :inactive-value="0"
                            @change="tabExtranetChange(DSQdataForm.businessState)"
                        ></el-switch>
                </el-form-item>
                <el-form-item label="商圈">
                    <el-tag
                        v-for="item in DSQdataForm.List"
                        :key="item.id"
                        size="medium"
                        closable
                        :disable-transitions="true"
                        @close="handleClose(item)"
                        style="margin-right:10px;"
                    >{{item.businessName}}</el-tag>
                    <span v-if="inputVisible">
                        区域：
                        <el-select
                            v-model="addForm.districtCode"
                            placeholder="请选择"
                            clearable
                            @change="CityRegionChange"
                        >
                            <el-option
                                v-for="item in this.$store.state.CityRegion"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>商圈：
                        <el-select
                            v-model="addForm.business"
                            placeholder="请选择"
                            :disabled="addForm.districtCode==''"
                        >
                            <el-option
                                v-for="item in businessList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                @click.native="handleInputConfirm(item)"
                            ></el-option>
                        </el-select>
                    </span>
                    <el-button
                        v-else
                        class="button-new-tag"
                        @click="showInput"
                        size="mini"
                        style="width:80px"
                    >添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./dept-add-or-update";
export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: "/sys/dept/list",
                deleteURL: "/sys/dept"
            },
            Dvisible: false,
            DSQdataForm: {
                name: "",
                id: "",
                businessState:0,
                List: []
            },
            inputVisible: false,
            inputValue: "",
            addForm: {
                districtCode: "",
                business: "",
                List: []
            },
            businessList: []
        };
    },
    components: {
        AddOrUpdate
    },
    methods: {
        DbusinessFun(row) {
            let _this = this;
            _this.DSQdataForm.name = row.name;
            _this.DSQdataForm.id = row.id;
            _this.DSQdataForm.businessState = row.businessState;
            _this.DSQdataForm.List = [];
            this.inputVisible = false;
            this.getList(row.id);
            _this.Dvisible = true;
        },
        getList(id) {
            let _this = this;
            this.$http
                .get(`/sys/dept/businessList/`, {
                    params: {
                        deptId: id
                    }
                })
                .then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    _this.DSQdataForm.List = res.data;
                })
                .catch(() => {});
        },

        //删除站点
        handleClose(tag) {
            let arr = [];
            arr.push(tag.id);
            this.$http
                .delete(`/sys/dept/deleteBusiness`, {
                    data: arr
                })
                .then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.$message.success("删除店商圈成功");
                    this.getList(this.DSQdataForm.id);
                    this.DSQdataForm.List.splice(
                        this.DSQdataForm.List.indexOf(tag),
                        1
                    );
                })
                .catch(() => {});
        },

        showInput() {
            this.inputVisible = true;
        },

        //添加商圈
        handleInputConfirm(item) {
            let _this = this;
            this.$http
                .post(`/sys/dept/saveBusiness`, {
                    deptId: _this.DSQdataForm.id,
                    businessId: this.addForm.business
                })
                .then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.getList(_this.DSQdataForm.id);
                    this.$message.success("添加店商圈成功");
                })
                .catch(() => {});
        },
        //行政区选择change
        CityRegionChange(val) {
            this.businessList = [];
            this.addForm.business = "";
            this.$http
                .get(`/dictionary/business/businessList`, {
                    params: {
                        districtCode: val
                    }
                })
                .then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.businessList = res.data;
                })
                .catch(() => {});
        },

        //修改店商圈状态
        tabExtranetChange(state) {
            this.$http
                .put(
                    `/sys/dept/businessState`,
                    {},
                    {
                        params: {
                            id: this.DSQdataForm.id,
                            businessState: this.DSQdataForm.businessState,
                        }
                    }
                )
                .then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.$message.success("更改成功");
                })
                .catch(() => {});
        },
    }
};
</script>
